<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<navbar title="人才详情" transparent :isFixed="false"></navbar>
		<view class="content" >
			<view class="info">
				<view class="info-user">
					<view class="info-user-avatar">
						<image :src="baseImage + detail.avatar" mode="" v-if="detail.avatar"></image>
						<image :src="baseImage + usual.seekerAvatar2" mode="" class="img" v-else-if="detail.sex=='女'">
						<image :src="baseImage + usual.seekerAvatar1" mode="" class="img" v-else>
					</view>
					<view class="info-user-name">
						{{detail.name}}
					</view>
				</view>
				<view class="info-data">
					<view class="info-data-title">
						{{detail.school}}-{{detail.major}}
					</view>
					<view class="info-data-tabs">
						<view v-if="detail.education">
							{{detail.education}}
						</view>
						<view v-if="detail.workType">
							{{detail.workType=="不限"?"工作形式不限":detail.workType}}
						</view>
						<view v-if="detail.workSalary">
							日薪{{Math.floor(detail.workSalary)}}
						</view>
					</view>
					<view class="info-data-cnt" v-if="detail.jineng">
						个人技能:{{detail.jineng}}
					</view>
				</view>
			</view>

			
			<view class="basic">
				<view class="title">
					基本信息
				</view>
				<view class="basic-box">
					<view class="basic-label">
						年龄：{{getFormatDate(detail.birthday)}}
					</view>
					<view class="basic-label">
						学校专业：{{detail.school || '-'}}-{{detail.major || ''}}
					</view>
					<view class="basic-label">
						求职意向：{{detail.gangwei || '-'}}
					</view>
					<view class="basic-label">
						工作经验：{{detail.workExperience || '-'}}
					</view>
					<view class="basic-label">
						工作方式：{{detail.workType || '-'}}
					</view>
					<view class="basic-label">
						工作时间：{{detail.workTime || '-'}}
					</view>
					<view class="basic-label">
						期望薪资：{{Math.floor(detail.workSalary)}}{{detail.workDanwei?detail.workDanwei:"元/天"}}
					</view>
				</view>
				<view class="basic-bj">
					<image :src="imgUrl + 'basicDetailBj.png'"></image>
				</view>
			</view>
			
			<view class="sector">
				<view class="title">
					个人简介
				</view>
				<text class="p">
					{{detail.cnt || '-'}}
				</text>
			</view>

			<view class="sector" style="margin-bottom: 54rpx;">
				<view class="title" style="margin-bottom: 42rpx;">
					雇主点评
					<!-- {{list.length}} -->
				</view>
				<view  v-if="list.length>0" >
				<view class="comments" v-for="row in list" :key="row.id" >
					<view class="infor">
						<img :src="baseImage + row.avatar" alt="" class="inforAvatar" v-if="row.avatar"/>
						<img :src="baseImage + usual.companyLogo" alt="" class="inforAvatar" v-else/>
						
						<view class="inforName">
							{{row.title}}
						</view>
						<view class="date">
							日期：{{row.time? row.time.split(" ")[0]:''}}
						</view>
					</view>

					<view class="mb13">
						<text>专业技能：</text>
						<van-rate readonly :value="row.major" color="#faad17" void-color="#c7c7c7" void-icon="star" />
					</view>
					<view class="mb13">
						<text>工作态度：</text>
						<van-rate readonly :value="row.attitude" color="#faad17" void-color="#c7c7c7" void-icon="star" />
					</view>
					<view class="mb13">
						<text>工作成绩：</text>
						<van-rate readonly :value="row.score" color="#faad17" void-color="#c7c7c7" void-icon="star" />
					</view>
				</view>
				</view>
				<view class="inforName"  v-else>  
					-
				</view>
				
				
			</view>
			
		 



			<view class="sector">
				<view class="title">
					人才分析器
				</view>
				<text class="p">
					该求职者<text class="blue">{{beforeTimeStr}}</text>与企业沟通过，总发起沟通次数<text class="blue">{{goutongCount}} 次</text>，累计在线时长<text class="blue">{{loginTime}}分钟</text>，近一个月交换联系方式<text class="blue">{{jiaohuanCount}}次</text>，获企业点评<text
						class="blue">{{commentCount}}次</text>
				</text>
			</view>

		</view>
		<view class="main-button" :style="{paddingBottom:(getSafeBottom==20? 0:getSafeBottom)+'px'}">
			<view class="main-button-update" @click="fav">
				<van-icon :name="'star'+(isFav?'':'-o')" size="18" :color="isFav?'#F7D367':'#9D9D9D'"/>
				<text>
					收藏
				</text>
			</view>
			<view class="main-button-open" @click="toMessage">
				立即沟通
			</view>
		</view>
		<view class="main-bj">
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue'
	import {getQiuzhiDetail,favQiuzhi,notFavQiuzhi,sessionCompany} from "@/core/web-api/qiyeduan.js"
	import dayjs from 'dayjs'
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				isFav: false,
				bottomBtnHeight: uni.upx2px(90),
				id:"",
				detail:{},
				isOver:true,
				list:[],
				beforeTime:"",
				beforeTimeStr:"",
				loginTime:"",
				goutongCount:"",
				jiaohuanCount:"",
				commentCount:"",
				dayGTCount:""
			}
		},
		methods: {
			
			/**
			 * 去沟通
			 */
			toMessage(){
				uni.navigateTo({
					url:'/pages/web/message/communication?dataid=' + this.id
				})
				
				// sessionCompany({id:this.id}).then(res=>{
				// 	if(res.code==20000){
				// 		uni.navigateTo({
				// 			url:'/pages-companies/communication/communication?id=' + this.id
				// 		})
				// 	}
				// })
				
			},
			
			/**
			 * 是否收藏
			 */
			fav(){
				if(!this.isOver){
					uni.showToast({
						title:"您的请求频率过高",
						icon:"none"
					})
					return;
				}
				this.isFav? this.toNotFav():this.toFav();
			},
			
			/**
			 * 收藏
			 */
			toFav(){
				this.isOver = false;
				favQiuzhi({id:this.id}).then(res=>{
					if(res.code==20000){
						this.isFav = true;
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				}).finally(()=>{
					this.isOver = true;
				})
			},
			
			/**
			 * 取消收藏
			 */
			toNotFav(){
				this.isOver = false;
				notFavQiuzhi({id:this.id}).then(res=>{
					if(res.code==20000){
						this.isFav = false;
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				}).finally(()=>{
					this.isOver = true;
				})
			},
			
			
			
			/**
			 * 获取详情
			 */
			getDetail(){
				getQiuzhiDetail({id:this.id}).then(res=>{
					if(res.code==20000){
						this.detail = res.data.detail;
						this.isFav = res.data.isFav;
						this.list = res.data.list || [];
						const {beforeTime,
								loginTime,
								goutongCount,
								jiaohuanCount,
								commentCount,
								dayGTCount} = res.data;
						this.beforeTime = beforeTime;
						if(beforeTime){
						switch(true){
							case beforeTime<60:
							console.log("aaaa");
							this.beforeTimeStr=beforeTime+"分钟前";
							break;
							case  beforeTime<60*24:
							console.log("time:::"+Math.round(beforeTime/60));
							this.beforeTimeStr=Math.round(beforeTime/60)+"小时前";
							break;
							case  beforeTime<60*24*7:
							console.log("time:::"+Math.round(beforeTime/60/24));
							this.beforeTimeStr=Math.round(beforeTime/60/24)+"天前";
							break;
							case  beforeTime<60*24*14:
							console.log("dddd");
							this.beforeTimeStr="一周前";
							break;
							case  beforeTime<60*24*21:
							console.log("eeee");
							this.beforeTimeStr="两周前";
							break;
							case  beforeTime<60*24*30:
							console.log("ffff");
							this.beforeTimeStr="三周前";
							break;
							case  beforeTime<60*24*30*2:
							console.log("gggg");
							this.beforeTimeStr="一个月前";
							break;
							default:
							console.log("eeeee");
							this.beforeTimeStr="两月前";
							} 
						}else{
							this.beforeTimeStr="还未"; 
					    }
						this.loginTime = loginTime;
						this.goutongCount = goutongCount;
						this.jiaohuanCount = jiaohuanCount;
						this.commentCount = commentCount;
						this.dayGTCount = dayGTCount;
					}
				})
			}
		},
		computed:{
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['baseImage','imgUrl','usual']),
			getFormatDate(){
				return function(date){
					if(!date) return "";
					return dayjs().diff(date,'year')
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail();
		}
	}
</script>

<style scoped lang="less">
	.main {
		width: 100%;
		min-height: 100vh;
		padding: 30rpx 0 150rpx;
		padding-top: 0;
		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -2;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
			image{
				width: 100%;
			}
		}
		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-size: 30upx;
			display: flex;
			&-update{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 276upx;
				color: #666666;
				text{
					margin-left: 10upx;
				}
			}
			&-open {
				width: 477upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				box-sizing: border-box;
			}
		}
	}
	
	.info{
		display: flex;
		padding-left: 10upx;
		box-sizing: border-box;
		&-user{
			display: flex;
			flex-direction: column;
			align-items: center;
			&-avatar{
				width: 135upx;
				height: 135upx;
				border-radius: 50%;
				image{
					width: 135upx;
					height: 135upx;
					border-radius: 50%;
				}
			}
			&-name{
				font-size: 30upx;
				color: #4d4d4d;
				font-weight: bold;
				margin-top: 20upx;
			}
		}
		&-data{
			flex:1;
			margin-left: 35upx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8upx;
			padding:20upx;
			&-title{
				font-size: 24upx;
				color: #4d4d4d;
			}
			&-tabs{
				display: flex;
				flex-flow: wrap;
				margin:20upx 0;
				view{
					height: 42upx;
					line-height: 42upx;
					border-radius: 6upx;
					background-color: #cbd6ff;
					font-size: 24upx;
					color: #4d4d4d;
					padding:0 10upx;
					margin-right: 23upx;
				}
			}
			&-cnt{
				font-size: 23upx;
				color: #808080;
			}
		}
	}
	.basic{
		position: relative;
		padding:15upx 25upx 25upx;
		box-sizing: border-box;
		margin-bottom: 30upx;
		margin-top: 30upx;
		&-label{
			font-size: 24upx;
			color: #808080;
			line-height: 1.8;
		}
		&-bj{
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
			z-index: -1;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}

	.main .imgBg {
		content: "";
		width: 100%;
		height: 90vh;
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(0deg, #F2F3F4, #B5C6FB);
		z-index: 80;
	}

	.content {
		width: 100%;
		position: relative;
		padding: 74rpx 30rpx;
		padding-top: 30upx;
		box-sizing: border-box;
	}

	.sector {
		width: 98%;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 36rpx 32rpx 42rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 32rpx;
		box-shadow: 14upx 6upx 0 #e5e3f8;
	}

	.title {
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 28rpx;
		color: #4d4d4d;
		margin-bottom: 20rpx;
	}


	.sector {
		padding: 26rpx 30rpx 28rpx;
	}

	.sector .p {
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
		margin-bottom: 10rpx;
		line-height: 1.5;
	}

	.show {
		text-align: center;
	}

	.comments {
		width: 100%;
		margin-bottom: 64rpx;
	}

	.comments .infor {
		position: relative;
		width: 100%;
		padding-left: 118rpx;
		padding-top: 18rpx;
		box-sizing: border-box;
		margin-bottom: 25rpx;
	}

	.comments .inforAvatar {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 50%;
	}

	.comments .inforName {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		margin-bottom: 14rpx;
	}

	.comments .date {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
	}

	.mb13 {
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		text{
			font-size: 26upx;
			color: #808080;
		}
	}

	.blue {
		color: #5f5ff1;
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		height: 100rpx;
		line-height: 100rpx;
		overflow: hidden;
		border-top: 1px solid #F6F6F6;
	}

	.collection {
		width: 35%;
		float: left;
		text-align: center;
	}

	.collection .span {
		width: 61rpx;
		height: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #666666;
		line-height: 39rpx;
		margin-left: 18rpx;
	}

	.call {
		width: 65%;
		text-align: center;
		background: linear-gradient(0deg, #6FABFD, #5371FD);
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		float: right;
	}
</style>